<template>
  <div class="container">
    <div class="page-main-box">
      <div class="button-box">
        <div class="left">
          <el-row>
            <el-button type="primary" @click="goCreate">添加学员</el-button>
            <el-button type="primary" @click="goImport">批量导入</el-button>
            <el-button type="primary" @click="sendMessage"
              >批量发消息</el-button
            >
            <el-button type="primary" @click="modify">批量修改</el-button>
          </el-row>
        </div>
        <div class="right">
          <div class="input">
            <el-input v-model="input" placeholder="学员关键字"></el-input>
          </div>
          <div class="clear">
            <el-button
              type="button"
              class="el-button--default"
              @click="nullClick"
              >清空</el-button
            >
            <el-button
              type="button"
              class="el-button el-button--primary"
              @click="screenClick"
              >筛选</el-button
            >
          </div>
          <div class="more" @click="openClick">
            <img src="@/assets/img/icon-filter.png" alt="" />
            <span>更多</span>
          </div>
        </div>
      </div>
      <div class="check-num-box">已选择{{ len }}项</div>
      <div class="table-box" v-if="finish">
        <el-table
          :data="tableData"
          style="width: 100%"
          v-loading="loading"
          :default-sort="{ prop: 'id', order: 'descending' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="学员ID" sortable width="100">
          </el-table-column>
          <el-table-column prop="nick_name" label="学员" width="210">
            <template slot-scope="scope">
              <div class="img">
                <img :src="tableData[scope.$index].avatar" alt="" />
              </div>
              <span class="student">{{ scope.row.nick_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="注册时间"
            sortable
            width="250"
          >
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" width="180">
          </el-table-column>
          <el-table-column prop="role.name" label="VIP会员" width="150">
          </el-table-column>
          <el-table-column
            prop="credit1"
            label="积分"
            sortable
            width="120"
          >
          </el-table-column>
          <el-table-column label="标签" width="200" class="customer">
            <template slot-scope="scope">
              <span v-if="tableData[scope.$index].tags.length === 0"></span>
              <span class="txt" v-for="item in tableData[scope.$index].tags" :key="item.id">
                {{ item.name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="备注" width="80"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                查看
              </el-button>
              <el-button @click="sendMessage" type="text" size="small">
                更多
              </el-button>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </template>
          </el-table-column>
        </el-table>

        <div class="page_footer">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total,
            sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <div class="message-mask-box" v-if="txtShow">
      <div class="send-message">
        <div class="header-box">
          <span>发消息</span>
          <img src="@/assets/img/错.png" alt="" @click="txtClick" />
          <img src="@/assets/img/错 (1).png" alt="" v-if="false" />
        </div>
        <div class="txt-box">
          <div class="input-box">
            <textarea v-model="message" placeholder="请输入消息文本"></textarea>
          </div>
        </div>
        <div class="btn-box">
          <button class="el-button el-button--primary" @click="txtClick">
            确认
          </button>
        </div>
      </div>
    </div>

    <div class="select-mask-box" v-if="false">
      <div class="send-message">
        <div class="header-box">
          <span>批量修改</span>
          <img src="@/assets/img/错.png" alt="" @click="closeClick" />
          <img src="@/assets/img/错 (1).png" alt="" v-if="false" />
        </div>
        <div class="select-box">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="more-screen-box" v-if="close">
      <div class="content">
        <div class="el-drawe-box">
          <div class="title-box">
            <span>更多筛选</span>
          </div>
          <div class="form-box">
            <el-input v-model="input" placeholder="学员列表关键字"></el-input>
            <div class="select-box">
              <el-select v-model="roleValue" placeholder="VIP会员">
                <el-option
                  v-for="item in role"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click.native.stop="roleSelect(item.name, item.id)"
                >
                </el-option>
              </el-select>
            </div>

            <div class="select-box">
              <el-select v-model="tagValue" placeholder="学员标签">
                <el-option
                  v-for="item in tagsOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click.native.stop="tagSelect(item.name, item.id)"
                >
                </el-option>
              </el-select>
            </div>
            <div class="select-box">
              <el-date-picker
                v-model="value"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="注册开始日期"
                end-placeholder="注册结束日期"
              >
              </el-date-picker>
            </div>

            <div class="select-box">
              <button class="el-button el-button--default" @click="closeClick">
                清空
              </button>
              <button class="el-button el-button--primary" @click="screenClick">
                筛选
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modification-mask-box" v-if="select">
      <div class="message-box">
        <div class="header-box">
          <span>批量修改</span>
          <img src="@/assets/img/错.png" alt="" @click="selectClick" />
        </div>
        <div class="select-box">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @click.native="SelectValue(item.label)"
            >
            </el-option>
          </el-select>
          <div class="select-show" v-if="value === '修改VIP'">
            <div class="select-vip">
              <div class="left">选择VIP</div>
              <div class="right">
                <el-select v-model="value2" placeholder="请选择">
                  <el-option
                    v-for="item in role"
                    :key="item.id"
                    :label="item.name"
                    :value="item.role_id"
                    @click.native.stop="tagstClicks(item.name, item.id)"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="select-time">
              <div class="left">VIP过期时间</div>
              <div class="right">
                <el-date-picker
                  v-model="valueTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  @change="TimeClick"
                >
                </el-date-picker>
              </div>
            </div>
          </div>

          <div class="select-title" v-if="value === '修改标签'">
            <div class="left">选择标签</div>
            <div class="right">
              <el-select v-model="value2" placeholder="请选择">
                <el-option
                  v-for="item in tagsOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click.native="tagstClick(item.id)"
                >
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="switch" v-if="value === '是否禁止登录'">
            <div class="left">是否静止登录</div>
            <div class="right">
              <el-switch
                v-model="bool"
                active-color="#13ce66"
                inactive-color="#dcdfe6"
              >
              </el-switch>
            </div>
          </div>
        </div>
        <div class="btn-box">
          <button class="el-button el-button--primary" @click="handllog">
            确认
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMemberInfo } from "@/network/member";
import { getMessageInfo } from "@/network/member";
import { getUserCoursesInfo } from "@/network/member";
import { setUserInfo } from "@/network/member";
import { setVIPUserInfo } from "@/network/member";
import { Message } from "element-ui";

export default {
  data() {
    return {
      finish: false,
      loading: true,
      tableData: [],
      input: "",
      page: 1,
      params: {
        page: 1,
        size: 10,
        sort: "id",
        order: "desc",
        keywords: "",
        tag_id: "",
        role_id: "",
      },
      params2: {
        user_ids: [],
        message: "",
      },
      setInfoParams: {
        user_ids: [],
        tag_ids: [],
        field: "",
        value: null,
        role_expired_at: "",
      },
      tags: [],
      val: [],
      message: "",
      txtShow: false,
      res: {},
      len: 0,
      total: "",
      value: "",
      value2: "请选择",
      tagsOptions: [],
      a: [],
      close: false,
      roleOptions: [],
      userCourseParams: {
        id: 84,
        page: 1,
        size: 8,
      },
      id: "",
      options: [
        {
          value: "修改VIP",
          label: "修改VIP",
        },
        {
          value: "修改标签",
          label: "修改标签",
        },
        {
          value: "是否禁止登录",
          label: "是否禁止登录",
        },
      ],
      bool: false,
      select: false,
      tag: "",
      tag_id: "",
      item_id: [],
      valueTime: "",
      role: [],
      roleValue: "",
      tagValue: "",
      data_length: "",
    };
  },
  methods: {
    roleSelect: function (name, id) {
      // console.log(name,id);
      this.params.role_id = id;
    },
    tagSelect: function (name, id) {
      // console.log(name,id);
      // delete this.params.role_id;
      // delete this.params.keywords;
      this.params.tag_id = id;

      let data = {
        page: this.params.page,
        size: this.params.size,
        sort: this.params.sort,
        order: this.params.order,

        tag_id: this.params.tag_id,
      };
      this.params = data;
      // this.params.delete("role_id");
      // this.params.delete("keywords");
      // console.log("created ==>", this.params);

      // console.log(this.params.tag_id);
    },
    TimeClick: function () {
      console.log(this.valueTime);
      // let time = new Date(this.valueTime).getTime();
      var year = new Date(this.valueTime).getFullYear();
      var month = new Date(this.valueTime).getMonth() + 1;
      var day = new Date(this.valueTime).getDate();
      var hour = new Date(this.valueTime).getHours();
      var minute = new Date(this.valueTime).getMinutes();
      var second = new Date(this.valueTime).getSeconds();
      // let time = 2022-08-16 00:00:00 ;
      hour = hour < 10 ? "0" + hour : hour;
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      // console.log(hour,minute,second);
      var time =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;
      // console.log(time);
      this.setInfoParams.role_expired_at = time;
    },
    tagstClick: function (index) {
      // // this.setInfoParams.field = ;
      this.setInfoParams.tag_ids.push(index);
      this.val.forEach((item) => {
        this.setInfoParams.user_ids.push(item.id);
      });
      // console.log(this.setInfoParams.user_ids);
      // console.log(index);
      // console.log(this.setInfoParams.tag_id);
    },
    tagstClicks: function (name, index) {
      // // this.setInfoParams.field = ;
      // this.setInfoParams.tag_ids.push(index);
      this.val.forEach((item) => {
        this.setInfoParams.user_ids.push(item.id);
        this.setInfoParams.value = index;
        // console.log(name,index);
        this.value2 = name;
      });
      // console.log(this.item_id);
      // console.log(index);
      // console.log(this.setInfoParams.tag_id);
      // console.log(this.setInfoParams.role_expired_at);
    },
    SelectValue: function (index) {
      // console.log(index);
      if (index === "修改VIP") {
        this.setInfoParams.field = "role_id";
      }
      if (index === "修改标签") {
        this.setInfoParams.field = "tag";
      }
    },
    valueClick: function (value) {
      console.log(value);
    },
    handllog: function () {
      // console.log(this.value);
      // this.created4();
      // console.log(this.tagsOptions.name);
      this.select = false;
      this.created1();
      this.created4();
    },
    selectClick: function () {
      this.select = false;
    },
    async created1() {
      // if (!this.params.keywords) {
      //   delete this.params.keywords;
      // }
      // console.log("cccc", this.params);

      this.loading = true;

      let { status, data } = await getMemberInfo(this.params);
      if (status === 0) {
        this.tableData = data.data.data;
        this.total = data.data.total;
        // console.log(this.data_length);
        // console.log(this.tableData);

        this.loading = false;
        // let time = new Date(this.tableData[0].created_at);
        // console.log(time);
        for (var i = 0; i < this.tableData.length; i++) {
          var time = new Date(this.tableData[i].created_at);
          var year = new Date(this.tableData[i].created_at).getFullYear();
          var month = new Date(this.tableData[i].created_at).getMonth() + 1;
          var day = new Date(this.tableData[i].created_at).getDate();
          var hour = new Date(this.tableData[i].created_at).getHours();
          var minute = new Date(this.tableData[i].created_at).getMinutes();
          var second = new Date(this.tableData[i].created_at).getSeconds();
          // let time = 2022-08-16 00:00:00 ;
          hour = hour < 10 ? "0" + hour : hour;
          minute = minute < 10 ? "0" + minute : minute;
          // console.log(hour,minute,second);
          var date = year + "-" + month + "-" + day + " " + hour + ":" + minute;
          // console.log(time);
          // this.setInfoParams.role_expired_at = time;
          this.tableData[i].created_at = date;
        }
        this.tagsOptions = data.tags;
        // console.log(data);
      } else {
        Message.warning("网络超时");
      }
      this.finish = true;
    },
    async created2() {
      this.res = await getMessageInfo(this.params2);
      // console.log(this.res);
      if (this.res.status === 0) {
        // console.log(this.res);
        Message.success("成功");
      }
    },
    async created3() {
      let res = await getUserCoursesInfo(this.userCourseParams);
      // console.log(res);
    },
    async created4() {
      let res = await setUserInfo(this.setInfoParams);
      if (res.status === 0) {
        Message.success("成功");
      }
      // console.log(res);
    },
    async created5() {
      let res = await setVIPUserInfo(this.setInfoParams);
      // console.log(res);
      if (res.status === 0) {
        this.role = res.data.data;
      }
    },
    handleCurrentChange(val) {
      // console.log(`每页 ${val} 条`);
      this.tableData = [];

      this.params.page = val;
      this.created1();
      // console.log(" this.params ", this.params);
    },
    goCreate: function () {
      this.$router.push({
        path: "/member/create",
      });
    },
    goImport: function () {
      this.$router.push({
        path: "/member/import",
      });
    },
    sendMessage: function () {
      if (this.val.length != 0) {
        this.txtShow = true;
      } else {
        Message.error("请选择需要发消息的学员");
      }
    },
    handleSelectionChange: function (val) {
      // console.log(val);
      this.val = val;
      this.len = val.length;
      // console.log( this.item_id);
    },
    modify: function (val) {
      if (this.val.length != 0) {
        this.select = true;
      } else {
        Message.error("请选择需要修改的学员");
      }
    },
    textarea: function () {
      this.txtShow = false;
    },
    txtClick: function () {
      this.txtShow = false;
      this.params2.message = this.message;
      // console.log(this.params2.message);
      // console.log(this.val);
      this.val.forEach((item) => {
        this.params2.user_ids.push(item.id);
      });
      this.created2();
      this.created1();
      this.message = "";
    },
    screenClick: function () {
      this.params.keywords = this.input;
      // this.params.tag_id =
      // console.log(this.keywords);
      this.created1();
    },
    nullClick: function () {
      this.input = "";
      this.params.keywords = "";
      this.created1();
    },
    closeClick: function () {
      this.params.tag_id = "";
      this.params.role_id = "";
      this.params.keywords = "";
      this.created1();
      this.close = false;
      this.input = "";
      this.tagValue = "";
      this.roleValue = "";
    },
    openClick: function () {
      this.close = true;
    },
    screenClick: function () {
      this.params.keywords = this.input;
      this.created1();
      this.close = false;
      // console.log(this.params.keywords);
    },
    deleteRow: function (scope, $index) {
      // console.log($index[scope].id);
      this.id = $index[scope].id;
      this.$router.push({
        path: `/member/${this.id}`,
      });
    },
  },
  created() {
    this.created1();
    this.created2();
    this.created3();
    this.created4();
    this.created5();
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f1f2f9;
  padding: 20px 5px 20px 20px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  .page-main-box {
    width: 100%;
    height: 100%;
    height: auto;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 90px;
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 5%);
    min-width: 1180px;
    .button-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30px;
      .left {
        .el-row {
          .el-button {
            margin-left: 15px;
          }
          .el-button:first-child {
            margin-left: 0;
          }
        }
      }

      .right {
        display: flex;
        align-items: center;
        cursor: pointer;
        .input {
          width: 150px;
        }
        .clear {
          margin-left: 10px;
        }
        .more {
          margin-left: 10px;
          img {
            width: 14px;
            height: 14px;
            margin-right: 5px;
          }
        }
      }
    }

    .check-num-box {
      font-size: 14px;
      color: #409eff;
      margin-bottom: 30px;
    }
    .table-box {
      ::v-deep .el-table tr {
        height: auto;
      }
      ::v-deep .el-table thead tr {
        height: 94px;
      }
      ::v-deep .el-table thead tr th {
        background-color: #f1f2f9 !important ;
        color: #333;
      }
      ::v-deep .cell{
        flex-wrap: wrap;
      }
      ::v-deep tbody tr td .cell .txt {
        background-color: #ecf5ff;
        border-color: #d9ecff;
        // height: 46px;
        padding: 0 10px;
        // line-height: 46px;
        font-size: 12px;
        border-width: 1px;
        border-style: solid;
        border-radius: 4px;
        box-sizing: border-box;
        color: #409eff;
            white-space: nowrap;
      }
      ::v-deep tbody tr td .cell .el-button--text {
        font-size: 14px;
        font-weight: 400;
      }
      ::v-deep tbody tr td {
        border-bottom: 1px solid #ebeef5;

        cursor: pointer;
        ::v-deep tbody tr td i {
          color: #409eff;
        }
      }
      img {
        width: 40px;
        height: 40px;
        // float: left;
      }
      ::v-deep .el-table td.el-table__cell div {
        display: flex;
        align-items: center;
        line-height: 40px;
        .img {
          width: 40px;
          vertical-align: middle;
          margin-right: 10px;
          img {
            border-radius: 50%;
          }
        }
        .student {
          display: block;
        }
      }
    }
  }
  .page_footer {
    width: 100%;
    text-align: center;
    padding: 2px 5px;
    color: #303133;
    font-weight: 700;
    margin-top: 30px;
  }
  .message-mask-box,
  .select-mask-box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 100;
    .send-message {
      width: 400px;
      height: 270px;
      margin: 0 auto !important;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 8px;
      background-color: #ffffff;
      position: absolute;
      .header-box {
        padding: 20px 20px 10px;
        display: flex;
        align-items: center;
        position: relative;
        span {
          display: block;
          font-size: 18px;
          color: #303133;
        }
        img {
          width: 20px;
          height: 20px;
          position: absolute;
          right: 20px;
        }
      }
      .txt-box {
        padding: 30px 20px;
        color: #606266;
        font-size: 14px;
        .input-box {
          textarea {
            padding: 5px 15px;
            width: 360px;
            height: 96px;
            color: #c8cbd2;
            border-color: #dcdfe6;
          }
        }
      }
      .btn-box {
        // margin-top: 20px;
        padding: 0 20px;
        width: 360px;
        height: 40px;
        position: relative;
        button {
          position: absolute;
          right: 0;
          top: -25%;
          margin: 0;
        }
      }
    }
  }

  .more-screen-box {
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 100;
    .content {
      height: 100%;
      width: 360px;
      position: fixed;
      right: 0;
      background-color: #ffffff;
      .el-drawe-box {
        height: 396px;
        padding: 30px;
        box-sizing: border-box;
        .title-box {
          width: 100%;
          height: 16px;
          font-size: 16px;
          font-weight: 400;
          color: #333;
          line-height: 16px;
          margin-bottom: 30px;
        }
        .select-box {
          width: 100%;
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          ::v-deep .el-input__inner {
            width: 300px;
          }
        }
      }
    }
  }
  .modification-mask-box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    .message-box {
      width: 420px;
      height: auto;
      background-color: #ffffff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-210px, -112px);
      .header-box {
        padding: 20px 20px 10px;
        display: flex;
        align-items: center;
        position: relative;
        span {
          display: block;
          font-size: 18px;
          color: #303133;
        }
        img {
          width: 20px;
          height: 20px;
          position: absolute;
          right: 20px;
        }
      }
      .select-box {
        padding: 30px 20px;
        color: #606266;
        font-size: 14px;
        .select-vip,
        .select-time,
        .select-title,
        .switch {
          display: flex;
          margin-top: 30px;
          align-items: center;
          .left {
            margin-right: 20px;
            width: 100px;
            text-align: right;
          }
        }
      }
      .btn-box {
        display: flex;
        justify-content: right;
        padding-right: 20px;
        padding-bottom: 30px;
      }
    }
  }
}
</style>